<template>
  <div class="address">
    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="back ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">{{aid?'编辑地址':'新增地址'}}</div>
    </div>

    <div>

      <van-address-edit :area-list="areaList"
                        :show-postal="showPostal"
                        :show-delete="!!aid"
                        show-set-default
                        :area-columns-placeholder="['选择省', '选择市', '选择区/县']"
                        :address-info="addressInfo"
                        @save="save"
                        @delete="deleteAddress" />

    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data';

export default {
  name: 'Address',
  data () {
    return {
      areaList,
      showPostal: true,

      //地址的aid, 编辑地址需要使用
      aid: '',

      //地址数据
      addressInfo: {}
    }
  },

  created () {
    //获取查询参数aid
    this.aid = this.$route.query.aid;

    if (this.aid) {
      this.getAddressByAid()
    }
  },

  methods: {
    back () {
      //返回上一级
      this.$router.go(-1);

    },

    // 新增地址
    newAddress (content) {

      let addressInfo = { ...content }
      addressInfo.isDefault = Number(addressInfo.isDefault)
      delete addressInfo.country;

      this.axios({
        method: 'post',
        url: '/addAddress',
        data: addressInfo
      }).then(result => {

        if (result.data.code == 9000) {
          this.$toast.success('新增地址成功');
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000)
        }
      })
    },


    // 编辑地址
    onEdit (content) {
      let addressInfo = {
        ...content,
        aid: this.aid
      }
      delete addressInfo.country

      let isModify = false;
      for (let key in addressInfo) {
        if (addressInfo[key] != this.addressInfo[key]) {
          isModify = true
        }
      }

      if (!isModify) {

        this.$toast.fail('地址未修改');
        return
      }

      addressInfo.isDefault = Number(addressInfo.isDefault)

      this.axios({
        method: 'post',
        url: '/editAddress',
        data: addressInfo
      }).then(result => {

        if (result.data.code == 30000) {

          this.$toast.success('地址修改成功');

          setTimeout(() => {
            this.$router.go(-1);
          }, 1000)
        }
      })
    },

    // 保存地址
    save (content) {
      if (this.aid) {
        this.onEdit(content);
      } else {
        //新增地址
        this.newAddress(content);

      }
    },

    //根据aid获取地址数据
    getAddressByAid () {
      this.axios({
        method: 'get',
        url: '/findAddressByAid',
        params: {
          aid: this.aid
        }
      }).then(result => {

        if (result.data.code == 40000) {
          let data = result.data.result[0];
          data.isDefault = Boolean(data.isDefault);
          this.addressInfo = data;
        }

      }).catch(err => {


      })
    },

    //删除地址
    deleteAddress () {
      this.axios({
        method: 'post',
        url: '/deleteAddress',
        data: {
          aid: this.aid
        }
      }).then(result => {

        if (result.data.code === 10000) {
          this.$toast.success('删除地址成功')

          setTimeout(() => {
            this.$router.go(-1);
          }, 1000)

        }

      }).catch(err => {


      })
    }
  }
}
</script>

<style lang="scss" scoped>
.address {
  .van-nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 115px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      font-size: 16px;
    }
  }
  .van-address-edit {
    padding-top: 80px;
  }
  .van-switch--on {
    background-color: #0c34ba;
  }

  .van-button--danger {
    background-color: #0c34ba;
    border-color: #0c34ba;
  }
}
</style>